<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="favicon.ico" ref="short icon">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form ref="loginForm" :model="loginForm" label-width="80px">
        <el-form-item label="用户名">
            <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
    </el-form>
</div>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                loginForm: {}

            }
        },
        methods: {
            login() {
                console.log("登录提交")

                this.$http.post('http://127.0.0.1:8080/user/login', this.loginForm).then(res => {
                    console.log("请求成功:", JSON.stringify(res))
                    if (res.status == '200') {
                        window.location = "http://127.0.0.1:8080/"
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.statusText
                        });
                    }
                }).catch(res => {
                    console.log("请求失败:", JSON.stringify(res))
                    this.$message({
                        type: 'error',
                        message: res.body.msg
                    });
                })
            }
        }
    })
</script>
</body>
</html>